<template>
	<view class="forget-page">
		<!-- 背景色 -->
		<view class="background-color"></view>
		<view class="texts"> Time mercenaries </view>
		<view class="texts"> --- 拥抱时间·密码找回登记 --- </view>
		<uni-forms :value="forgetForm" ref="forgetFormRef" :rules="rules">
			<!-- 用户名输入框 -->
			<uni-forms-item name="username">
				<uni-easyinput style="color: white;" type="text"  v-model="forgetForm.username" placeholder="用户名" @blur="test1()"/>
				<!-- <uni-easyinput style="color: white;" type="text" prefixIcon="contact" v-model="forgetForm.username" placeholder="用户名"/> -->
			</uni-forms-item>
			<!-- 真实姓名 -->
<!-- 			<uni-forms-item name="realname">
				<uni-easyinput style="color: white;" type="text" v-model="forgetForm.realname" placeholder="真实姓名" />
			</uni-forms-item> -->
			<uni-forms-item name="telephone">
				<uni-easyinput style="color: white;" type="text" v-model="forgetForm.telephone" placeholder="电话" @blur="test2()"/>
				<!-- <uni-easyinput style="color: white;" type="text" v-model="forgetForm.telephone" placeholder="电话|用于密码找回" /> -->
			</uni-forms-item>
			<uni-forms-item>
				<view class="texts" >因为手机验证码个人开发难搞</view>
				<view class="texts" >将会进入人工确认环节</view>
				<view class="texts" >提交的账号经人工确认后帮助找回密码</view>
				<view class="texts" > </view>
				<view class="the-button">
					<button type="default" size="mini" class="forget-button" @click="forget">确认找回</button>
				</view>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	import { ajax } from "../../js_sdk/lzh-promise1/request.js"
	export default {
		data() {
			return {
				// urlip: 'http://127.0.0.1:8000',
				urlip: 'http://192.168.3.9:8000',
				forgetForm: {
					username: '',
					// realname: '',
					telephone: '',
				},
				rules: {
					// 对username字段进行必填验证
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名！',
								trigger: 'blur'
							},
							{
								min: 3,
								max: 5,
								errorMessage: '长度在 {min} 到 {max} 个字符！',
								trigger: 'blur'
							}
						]
					},
					telephone: {
						rules:[{
								required: true,
								errorMessage: '请输入手机号！',
								trigger: 'blur'
							},
							{
								min: 11,
								max: 11,
								message: '长度在 {min} 到 {max} 个字符！',
								trigger: 'blur'
							}
						]
					}
				}
			}
		},
		mounted() {
			// uni.setStorageSync('urlip', null)
			uni.setStorageSync('urlip', this.urlip)
		},
		methods: {	
			async test1 () {
				const { data: res } = await ajax(this.urlip + '/exists/',{username: this.forgetForm.username},'get')
				// console.log(res)
				if (res.code !== 200) {
					return uni.showModal({
						title: '通知',
						content: '服务器链接异常！',
						showCancel: false
					})
				}
				if (res.data.length == 0) {
					return uni.showModal({
						title: '通知',
						content: '账号不存在,请重新输入！',
						showCancel: false
					})
				}
			},
			async test2 () {
				const { data: res } = await ajax(this.urlip + '/exists/',{telephone: this.forgetForm.telephone},'get')
				if (res.code !== 200) {
					return uni.showModal({
						title: '通知',
						content: '服务器链接异常！',
						showCancel: false
					})
				}
				if (res.data.length == 0) {
					return uni.showModal({
						title: '通知',
						content: '手机号不存在,请重新输入！',
						showCancel: false
					})
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.forgetForm.telephone))) {
					return uni.showModal({
						title: '通知',
						content: '手机号格式不正确,请重新输入！',
						showCancel: false
					})
				}
			},
			// 注册按钮
			forget () {
				this.$refs.forgetFormRef.validate(async valid => {
					const {
						data: res,
					} = await ajax(this.urlip + '/forget/',this.forgetForm,'post')
					console.log(res)
					if (res.code !== 201) {
						return uni.showModal({
							title: '通知',
							content: res.msg,
							showCancel: false
						})
					}
					uni.setStorageSync('username', this.forgetForm.username);
					uni.setStorageSync('password', this.forgetForm.password);
					uni.navigateTo({ url: './login' })
					return uni.showModal({
						title: '通知',
						content: '注册成功',
						showCancel: false
					})
				})
			}
		}
	}
</script>

<style>
.forget-page {
	width: 100%;
	height: auto;
	top: 0;
}
.uni-forms {
	padding: 40px 15px;
}
.background-color {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: #2C405A;
}
.texts {
		color: white;
		margin-top: 10px;
		font-size: 16px;
		width: 100%;
		height: auto;
		font-weight: 600;
		text-align: center;
	}
.textss {
	color: white;
	font-size: 16px;
}
.the-button {
	width: 100%;
	height: auto;
	text-align: center;
}
.forget-button {
	margin-left: 10px;
	margin-right: 10px;
	font-size: 15px;
}
</style>
